<template>
  <div class="Bussiness" style="border:white solid 0px">

    <el-dialog
        title="订单详情"
        :visible.sync="dialogVisible"
        width="60%">
      <h2>订单已送达</h2>
      {{ endTime }}
      <h3>商家地址：{{ merchantAddress }}</h3>
      <div></div>
      <h3>已隐藏客户地址</h3>
      <div></div>
      <h3>商品清单</h3>
      <el-table
          :data="productData"
          style="width: 100%">
        <el-table-column
            prop="productName"
            label="商品名"
            align="center">
        </el-table-column>
        <el-table-column
            prop="productNum"
            label="商品数量"
            align="center">
        </el-table-column>
        <el-table-column
            prop="productSumPrice"
            label="价格"
            align="center"
            :formatter="formats">
        </el-table-column>
      </el-table>
      <h3>商品总价：{{ price }}</h3>
      <h3>订单备注：{{ orderNotes }}</h3>
      <h3>订单编号：{{ code }}</h3>
      <el-button type="primary" @click="dialogVisible = false">返回</el-button>
    </el-dialog>

    <div>
      <div>
        常驻区域：
        <template>
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
<!--        接单上限：-->
<!--        <template>-->
<!--          <el-select v-model="numvalue" clearable placeholder="请选择">-->
<!--            <el-option-->
<!--                v-for="item in num"-->
<!--                :key="item.numvalue"-->
<!--                :label="item.label"-->
<!--                :value="item.numvalue">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </template>-->
        状态：
        <template>
          <el-select v-model="statusvalue" clearable placeholder="请选择">
            <el-option
                v-for="item in status"
                :key="item.statusvalue"
                :label="item.label"
                :value="item.statusvalue">
            </el-option>
          </el-select>
        </template>
        <el-link type="primary" style="margin-left: 20px" href="/personal">个人中心</el-link>
      </div>
      <div style="border:white solid 0px;margin-top: 20px ">
        <el-table
            :data="tableData1"
            height="250"
            border
            style="width: 50%;margin-left: 25%">
          <el-table-column
              prop="area"
              label="区域"
              align="center">
          </el-table-column>
          <el-table-column
              prop="merchantAddress"
              label="取货地址"
              align="center">
          </el-table-column>
          <el-table-column
              prop="merchantTel"
              label="商家电话"
              align="center">
          </el-table-column>
          <el-table-column
              prop="customerAddress"
              label="送货地址"
              align="center">
          </el-table-column>
          <el-table-column
              prop="startTime"
              label="此订单创建时间"
              align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleCheck(scope.$index,scope.row)">我要抢单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="but" @click="refreshOrder" style="margin-right: 15%">手动刷新抢单订单</el-button>
      </div>
    </div>

    <div style="border:white solid 0px;margin-top: 20px ">
      <el-table
          :data="tableData2"
          height="250"
          border
          style="width: 50%;margin-left: 25%">
        <el-table-column
            prop="customerTel"
            label="客户电话"
            align="center">
        </el-table-column>
        <el-table-column
            prop="customerAddress"
            label="客户地址"
            align="center">
        </el-table-column>
        <el-table-column
            prop="startTime"
            label="客户下单时间"
            align="center">
        </el-table-column>
        <el-table-column
            prop="merchantTel"
            label="商家电话"
            align="center">
        </el-table-column>
        <el-table-column
            prop="merchantAddress"
            label="商家地址"
            align="center">
        </el-table-column>
        <el-table-column
            prop="income"
            label="本单预计佣金"
            align="center">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleCheck2(scope.$index,scope.row)">我要取货
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button class="but" @click="refreshOrder2" style="margin-right: 15%">手动刷新待取货订单</el-button>
    </div>

    <div style="border:white solid 0px;margin-top: 20px ">
      <el-table
          :data="tableData3"
          height="250"
          border
          style="width: 50%;margin-left: 25%">
        <el-table-column
            prop="customerTel"
            label="客户电话"
            align="center">
        </el-table-column>
        <el-table-column
            prop="customerAddress"
            label="客户地址"
            align="center">
        </el-table-column>
        <el-table-column
            prop="orderNotes"
            label="订单备注消息"
            align="center">
        </el-table-column>
        <el-table-column
            prop="statue"
            label="订单状态"
            align="center">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleCheck3(scope.$index,scope.row)">我已送达
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button class="but" @click="refreshOrder3" style="margin-right: 15%">手动刷新待送达订单</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "rider_main.vue",
  data() {
    return {
      dialogVisible: false,
      endTime: '',
      merchantAddress: '',
      price: '',
      orderNotes: '',
      code: '',
      tableData1: []
      , tableData2: []
      , tableData3: [],
      productData: []
      , options: [{
        value: 'A食堂',
        label: 'A食堂'
      }, {
        value: 'B食堂',
        label: 'B食堂'
      }, {
        value: 'C食堂',
        label: 'C食堂'
      }, {
        value: 'D食堂',
        label: 'D食堂'
      }, {
        value: 'E食堂',
        label: 'E食堂'
      }],
      num: [{
        numvalue: '1',
        label: '1单'
      },
        {
          numvalue: '2',
          label: '2单'
        },
        {
          numvalue: '3',
          label: '3单'
        },
        {
          numvalue: '4',
          label: '4单'
        },
        {
          numvalue: '5',
          label: '5单'
        },
        {
          numvalue: '6',
          label: '6单'
        }],
      status: [{
        statusvalue: '休息中',
        label: '休息中'
      }, {
        statusvalue: '接单中',
        label: '接单中'
      }],
      value: 'A食堂',
      numvalue: '6',
      statusvalue: '接单中'
    }
  },
  mounted() {
    // this.WebSocketTest()
    this.refreshOrder()
    //1s一次进行查询
    setInterval(this.refreshOrder2, 3000);
    setInterval(this.refreshOrder3, 1000);
  },
  created() {
    this.$watch("value", function (newValue, oldValue) {
      this.refreshOrder();
    })
    this.$watch("statusvalue", function (newValue, oldValue) {
      this.refreshOrder();
    })
  },
  methods: {
    //手动调用方法进行数据刷新
    refreshOrder() {
      let url = "riderApi/rider/riderRefresh/" + this.statusvalue + "/" + this.value
      this.axios.get(url).then(
          r => {
            console.log(r.data)
            this.tableData1 = r.data
          })
    },
    handleCheck(index, row) {
      // riderGrabOrder/{riderCode}/{orderCode}
      this.axios.post("riderApi/rider/riderGrabOrder/" + "6F8DDNHV0400" + "/" + row.code).then(
          r => {
            this.messageShow(r.data.detail)
            this.refreshOrder()
            this.$forceUpdate()
          }
      )
    },
    refreshOrder2() {
      let url = "riderApi/rider/riderCheckOrder/" + "6F8DDNHV0400"
      this.axios.get(url).then(
          r => {
            this.tableData2 = r.data
          })
    },
    handleCheck2(index, row) {
      this.axios.post("riderApi/rider/riderConfirmPickup/" + "6F8DDNHV0400" + "/" + row.code).then(
          r => {
            this.messageShow(r.data.detail)
            this.refreshOrder()
            this.$forceUpdate()
          }
      )
    },
    refreshOrder3() {
      let url = "riderApi/rider/riderCheckDelivery/" + "6F8DDNHV0400"
      this.axios.get(url).then(
          r => {
            this.tableData3 = r.data
          })
    },
    handleCheck3(index, row) {
      //riderPickUp/{riderCode}/{orderCode}
      this.axios.post("riderApi/rider/riderPickUp/" + "6F8DDNHV0400" + "/" + row.code).then(
          r => {
            this.messageShow("订单详情", r.data)
            //送达时间
            this.endTime = r.data.endTime
            //商家地址
            this.merchantAddress = r.data.merchantAddress
            //商品总价
            this.price = r.data.price
            //订单备注
            this.orderNotes = r.data.orderNotes
            //订单编号
            this.code = r.data.code
            //商品集合
            this.productData = r.data.list
            this.dialogVisible = true
            this.refreshOrder()
            this.$forceUpdate()
          }
      )
    }, formats(row, column, cellValue) {
      cellValue = row.productNum * row.productPrice
      return cellValue
    },
    messageShow(title, message) {
      this.$notify({
        title: title,
        message: (message)
      })
    }
    // WebSocketTest() {
    //   // eslint-disable-next-line @typescript-eslint/no-this-alias
    //   let that = this
    //   if ("WebSocket" in window) {
    //     // 打开一个 web socket
    //     let ws = new WebSocket("ws://localhost:8882/socketService");
    //     ws.onopen = function () {
    //       // Web Socket 已连接上，使用 send() 方法发送数据
    //       ws.send(that.statusvalue + "_" + that.value);
    //       // alert("数据发送中...");
    //     };
    //     ws.onmessage = function (evt) {
    //       let received_msg = evt.data
    //       // console.log(received_msg)
    //       that.tableData1 = received_msg
    //       // console.log(that.tableData1)
    //       that.$forceUpdate()
    //     };
    //     ws.onclose = function () {
    //       alert("连接已关闭...");
    //     };
    //   } else {
    //     alert("您的浏览器不支持 WebSocket!");
    //   }
    // },
  }
}
</script>

<style scoped>
.but {
  margin-top: 10px;
  margin-left: 800px;
}
</style>